<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/TR/xhtml1/strict">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Ancient Art of War at Sea</title>
<script src="libs/buildDOM.js" type="text/javascript"></script>
<style>
html, body {
    padding: 0em;
    margin: 0em;
}
body {
    margin: 10%;
    padding: 0em;
}
.timeLine {
    font-size: 0.7em;
    letter-spacing: 0.15em;
}
dl {
    width: 30em;
    margin-top: 0em;
    margin-bottom: 1.5em;
}
dd {
    margin-bottom: 1em;
    text-indent: 0em;
    margin-left: 1.4em;
}
dt {
    text-indent: 0em;
}
h2 {
    margin-top: 0.2em;
    margin-bottom: 0.7em;
}
h3 {
    margin-top: 0.2em;
    margin-bottom: 0.6em;
}
</style>
</head>
<body>



<table> <tr> <td>
<div id="template"></div>
</td>
<td>
<div id="samples"></div></td>

</tr>
</table>

<button onclick="generate()">Generate</button>

<textarea id="code" rows="10" cols="50"></textarea>

<script type="text/javascript">

var currIndex = 1;
var scale = 3;

function getSpritesDOM()
{
    var TRs = [];
    for (var p = 0; p < 5; p++) {
        for (var i = 0; i < 3; i++) {
            var TDs = [];
            for (var j = 0; j < 6; j++) {
                TDs[j] = {'td': {'div': {
                    '@id': (p+1) + '_' + (i*6 + j + 1),
                    '@style': 'width: '+(scale*32)+'px; height: '+(scale*20)+'px; background-image: url(sprites.png); background-position: ' + ((6-j)*32*scale) + 'px ' + ((15-(p*3+i))*20*scale) + 'px;',
                    '@onclick': 'setSprite('+ p + ', '+(i*6 + j)+');'
                }}};
            }
            TRs[p*3 + i] = {'tr': TDs};
        }
    }

    return buildDOM({'table': /*{'@border': '0', '@cellpadding': '0', '@cellspacing': '0'}, */TRs});
};

function getMapTemplate()
{
    var TRs = [];
    for (var i = 0; i < 20; i++) {
        var TDs = [];
        for (var j = 0; j < 10; j++) {
            TDs[j] = {'td': {'@style': 'border: 1px solid black;',  'div':
                ['',
                {'@id': 'fragment' + (i*10 + j + 1),
                '@style': 'opacity: 0.7; width: '+(scale*32-1)+'px; height: '+(scale*20-1)+'px; background-color: white;',
                '@onclick': 'currIndex = ' + (i*10 + j + 1) + ';'
            }]}};
        }
        TRs[i] = {'tr': TDs};
    }

    return buildDOM({'table': [{
            '@style': 'border-collapse: collapse; background-image: url(map.png); background-position: 1px 1px;',
            '@border': '0',
            '@cellpadding': '0',
            '@cellspacing': '0'
        },
        TRs]
    });
};

function generate()
{
    var text = '';
    for (var i = 0; i < 20; i++) {
        for (var j = 0; j < 10; j++) {
            var str = document.getElementById('fragment' + (i*10 + j + 1)).mapFragment;
            str = str ? str : '';
            text += str+' '
        }
            text += '\n'
    }

    document.getElementById('code').innerHTML = text;
}

function setSprite(page, index)
{
    document.getElementById('fragment'+currIndex).style.backgroundImage = 'url(sprites.png)';
    document.getElementById('fragment'+currIndex).style.backgroundPosition = '' + ((6-(index%6))*32*scale) + 'px ' + ((15-(page*3+(Math.floor(index/6))))*20*scale) + 'px';
    document.getElementById('fragment'+currIndex).style.opacity = '0.7';
    document.getElementById('fragment'+currIndex).mapFragment = ''+(page+1)+':'+String.fromCharCode(64+index+1);
}

document.getElementById('samples').appendChild(getSpritesDOM());
document.getElementById('template').appendChild(getMapTemplate());
</script>

<!--

<h1>Ancient Art of War at Sea</h1>
<h2>Campanies</h2>
<h3>The Bane of Oldain</h3>
<h3>The Race for the Crown</h3>
<h3>Running the Gauntlet</h3>
<h6>Captain`s log: 29 Dec, 1786</h6>
<p>14 long months we have been at<br/>
sea. I am to sail to longitude<br/>
123 degrees, latitude 47 degrees<br/>
and some seconds north. Then,<br/>
I am to open the sealed orders<br/>
in the chest in my cabin. At<br/>
long last, we arrive tomorrow!</p>

<h6>Captain`s log: 30 Dec, 1786</h6>
<p>Today we sailed through the<br/>
rough waters of the straits of<br/>
Juan de Fuca and this evening<br/>
arrived at our destination. I<br/>
use my penknife to cut through<br/>
the stitching on the chest.<br/>
The orders read:
   <blockquote>Instructions for Commander<br/>
    of the Impetuous: Capture<br/>
    the nearby enemy crown or<br/>
    swing on the gallows!</blockquote>
</p>
<h6>Captain`s log: 31 Dec, 1786</h6>
<p>As dawn`s light comes over the<br/>
horizon, I see enemy sails in<br/>
every direction! It is a trap!</p>
<p>O curse the sea and curse the<br/>
    fate that brought me here…</p>
<h3>The Last Crown</h3>
<h3>Attack of the Superpower</h3>
<h3>1588 The Spanish Armada</h3>
<h3>1676 Sicily, 1798 The Nile</h3>
<h3>1759 Quiberon Bay</h3>

<h3>1805 Trafalgar</h3>
<h3>1941 Bismarck</h3>
<h4>In Search of the Bismarck<br/>1741/1941</h4>
<p>By 1941, german u-boats were<br/>
threatening the british supply<br>
line through the Atlantic.</p>
<p>Germany sends a huge, new<br>
battleship and a heave cruiser<br>
to snap the straining supply<br>
line. Britain sends 2 aircraft<br>
carriers, 7 battleships and 12<br>
cruisers to sink the Bismarck.</p>
<p>But what if all this had<br>
occured 200 years earlier in<br>
1741? What if the Duke of<br>
Sidonia was in command of the<br>
British fleet and you were in<br>
command of the Bismarck?</p>
<p>Try to break through the ever<br>
tightening net of British war-<br>
ships. If you can reach the<br>
Atlantic and capture the<br>
crown, you will bring England<br>
to her knees!</p>
<h3>You Only Live Thrice</h3>
<h2>Rules</h2>
<h3>Ports repair ships (briskly | slowly | steadily)</h3>
<p>Порты ремонтируют суда (бодро | медленно | постоянно)</p>
<h3>Ports need supplies (never | rarely | often)</h3>
<p>Порты нуждаются в поставках (никогда | редко | часто)</p>
<h3>Rough water is (very risky | mild | risky)</h3>
<p>Бурные воды (очень опасные | безопасные | опасные)</p>
<h3>Shallow water is (very risky | safe | risky)</h3>
<p>Мелкие воды (очень опасные | безопасные | опасные)</p>
<h3>You have (an average | a crack | a green) crew</h3>
<p>У вас (средняя | отборная | «зелёная») команда</p>
<h3>Visibility is (good | unlimited | poor)</h3>
<p>Видимость (хорошая | безграничная | плохая)</p>
<h3>Wind changes (rarely | often | never)</h3>
<p>Ветер меняется (редко | часто | никогда)</p>
<h2>Opponents</h2>
<ul>
<li><strong>Thor Foote</strong> is reckless and lacks wisdom.</li>
<li><strong>The Duke of Medina Sidonia</strong> fights in close where his cannon is effective.</li>
<li>The bloodthirsty pirate, <strong>Blackbeard</strong>, is ruthless and seldom retreats.</li>
<li><strong>Martin Tromp</strong> is from the old school of formal tactics.</li>
<li><strong>John Paul Jones</strong> is a brilliant tactician and fears no one.</li>
<li><strong>Lord Admiral 1Nelson</strong> took sailing ship tactics to their highest level.</li>
</ul>

<h2>Gameplay</h2>
<h3>Main</h3>
<h4>1. Time (slow, medium, fast, faster)</h4>
<p></p>
<h4>2. Fleet (Флот)</h4>
<p>Показать информацию о силах (своих и противника). Кол-во Флагманов (Flag), Линкоров (Line) и Фригатов (Frigate)</p>
<h4>3.1 Clear (Очистить)</h4>
<p>Очистить </p>
<h4>3.2 Pause (Очистить)</h4>
<p></p>
<h4>4. Surrender (Капитуляция)</h4>

<h3>Select unit</h3>
<h4>1. Move</h4>
<p></p>
<h4>2. Info</h4>
<p>Показать информацию о силах (своих и противника). Кол-во Флагманов (Flag), Линкоров (Line) и Фригатов (Frigate)</p>
<h4>3. Detach (Отсоединить)</h4>
<p>Разделяет на две команды из имеющихся командиров(?)</p>
<h4>4. Practice (Муштра)</h4>



<h4>Orders</h4>
<p>general chase — </p>
<p>avoid battle — избегать битвы</p>
<p>Course — задать курс самостоятельно</p>
<p>mimic ship in front — Подражать первому кораблю</p>
<p>follow ship in front — Быть на очереди в битве</p>
<h4>2. Info</h4>
<p>Показать информацию о силах (своих и противника). Кол-во Флагманов (Flag), Линкоров (Line) и Фригатов (Frigate)</p>
<h4>3. Detach (Отсоединить)</h4>
<p>Разделяет на две команды из имеющихся командиров(?)</p>
<h4>4. Practice (Муштра)</h4>


-->

</body>
</html>